<div class="row">
    <div class="col-md-8">
        <h1 class="page-title">Detail</h1>
        <div class="detail" id="detail">
            <h2>{{date.year}}-{{date.month}}-{{date.date}}</h2>
            <div class="am-g">
                <div class="col-md-4">
                    <div class="pie">
                        <strong class="energy">{{blog.energy}}</strong>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="actions">
                        <div class="title">
                            <h3>Items</h3>
                            <a class="btn btn-new" href="javascript:;" ng-show="blog.actions.length < 3" ng-click="newItem();">+</a>
                        </div>
                        <ul class="list">
                            <li ng-repeat="action in blog.actions">
                                <div class="display" ng-show="!action.showEdit">
                                    <span class="type">{{action.type}}</span>
                                    <span class="time">{{action.time}} <small>min</small></span>
                                    <span class="energy">{{action.energy}} <small>kcal</small></span>
                                    <span class="option">
                                        <a class="btn-small btn-delete" href="javascript:;" ng-click="deleteItem($index);">delete</a>
                                        <a class="btn-small btn-edit" href="javascript:;" ng-click="editItem($index);">edit</a>
                                    </span>
                                </div>
                                <div class="edit" ng-show="action.showEdit">
                                    <label class="type">
                                        <select ng-model="selectedAction.type" ng-options="actionType for actionType in actionTypes"></select>
                                    </label>
                                    <label class="time">
                                        <select ng-model="selectedAction.time" ng-options="time for time in times"></select> <small>min</small>
                                    </label>
                                    <span class="option">
                                        <a class="btn-small btn-save" href="javascript:;" ng-click="saveItem($index);">save</a>
                                    </span>
                                </div>
                            </li>
                            <li ng-show="showNew">
                                <label class="type">
                                    <select ng-model="newActionData.type" ng-options="actionType for actionType in actionTypes"></select>
                                </label>
                                <label class="time">
                                    <select ng-model="newActionData.time" ng-options="time for time in times"></select> <small>min</small>
                                </label>
                                <span class="option">
                                    <a class="btn-small btn-add" href="javascript:;" ng-click="addItem()">add</a>
                                </span>
                            </li>
                        </ul>
                    </div><!-- /.actions -->

                    <div class="mood">
                        <div class="title"><h3>Mood</h3></div>
                        <ul>
                            <li ng-repeat="mood in moods">
                                <a class="face-icon {{mood.en}}" ng-class="{'active': mood.isActive}" href="javascript:;" ng-click="setMood(mood.score)">{{mood.cn}}</a>
                            </li>
                        </ul>
                    </div><!-- /.moods -->
                    <div class="summary">
                        <div class="title">
                            <h3>Blog</h3>
                            <a class="btn btn-edit" href="javascript:;" ng-show="!showSummaryEdit" ng-click="editSummary();">Edit</a>
                        </div>
                        <div class="display" ng-show="!showSummaryEdit">{{blog.summary}}</div>
                        <div class="edit" ng-show="showSummaryEdit">
                            <div class="textarea-wrap">
                                <textarea name="summary" ng-model="blog.summary" rows="5" cols="50" placeholder="Write something here..."></textarea>
                            </div>
                            <a class="btn btn-post" href="javascript:;" ng-click="saveSummary();">Post</a>
                        </div>
                    </div><!-- /.summary -->
                </div><!-- /.col-md-7 -->
            </div><!-- /.row -->
        </div><!-- /.detail -->
    </div><!-- /.col-md-8 -->
    <div class="col-md-4 ci-col-sub">
        <div class="am-g ci-block">
            <div class="calander" id="calander">
                <h3>October</h3>
                <ul class="weekdays">
                    <li>Mon</li>
                    <li>Tue</li>
                    <li>Wen</li>
                    <li>Thu</li>
                    <li>Fri</li>
                    <li>Sat</li>
                    <li>Sun</li>
                </ul>
                <ul class="days">
                    <li ng-repeat="day in days">
                        <div class="inner" ng-show="day.date" ng-class="{'today': day.date == date.date}">
                            <a href="#/detail?date={{day.dateString}}">{{day.date}}</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div><!-- /.col-md-4 -->
</div><!-- /.row -->

<style>
.detail h2 {
    margin: 0 0 30px 0;
    text-align: center;
    font-size: 30px;
}
.detail ul,
.detail li {
    list-style: none;
    padding: 0;
    margin: 0;
}
.detail .title {
    overflow: hidden;
    margin-bottom: 10px;
}
.detail .title h3 {
    float: left;
    margin: 0;
}
.detail .btn {
    float: right;
    margin: 0;
}

.detail .pie {
    width: 200px;
    height: 200px;
    border: solid 20px #eee;
    border-radius: 50%;
    text-align: center;
    background: #ddd;
}
.detail .pie .energy {
    height: 160px;
    line-height: 160px;
    font-size: 50px;
    color: #666;
}
.detail .list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.detail .list li {
    padding: 10px;
    margin: 0;
    border-bottom: solid 1px #ddd;
}
.detail .list li:hover {
    background-color: #eee;
}
.detail .list span,
.detail .list label {
    display: inline-block;
    min-width: 100px;
}
.detail .list .option {
    float: right;
    text-align: right;
}
.detail .pie,
.detail .actions,
.detail .mood,
.detail .summary {
    margin-bottom: 30px;
}


.detail .mood,
.detail .summary {
    clear: both;
}

.detail .mood li {
    display: inline-block;
    margin-right: 20px;
}
.detail .mood .face-icon {
    display: block;
    overflow: hidden;
    width: 30px;
    height: 30px;
    border: solid 2px #eee;
    border-radius: 50%;
    text-indent: -500px;
    background-color: #ddd;
}
.detail .mood .face-icon:hover {
    border-color: #f66;
}
.detail .mood .face-icon.active {
    border: solid 2px #666;
}
.detail .textarea-wrap {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 15px;
    background-color: #eee;
}
.detail .textarea-wrap textarea {
    outline: none;
    width: 100%;
    border: none;
    background-color: #eee;
}



.calander {
    overflow: hidden;
}
.calander h3 {
    padding: 10px;
    margin: 0;
    border-bottom: solid 2px #666;
    text-align: center;
    font-size: 30px;
}
.calander ul, .calander li {
    list-style: none;
    padding: 0;
    margin: 0;
}
.calander .weekdays {
    overflow: hidden;
    border-bottom: solid 1px #666;
    margin-bottom:  10px;
}
.calander .weekdays li {
    float: left;
    width: 14.28571%;
    text-align: center;
    font-size: 15px;
}

.calander .days li {
    position: relative;
    float: left;
    width: 14.28571%;
    margin-bottom: 10px;
    text-align: center;
}

.calander .days a {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 30px;
    font-size: 14px;
    font-style: normal;
    background: #ddd;
}

.calander .days .today a {
    background: #f66;
    color: #fff;
}

</style>